<!--
 * name:设备状态
 * author:phx
 * date:2021.7.1
-->
<template>
    <div class="item-warp status-warp">
        <div class="item-title">
            <h2>设备状态</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_count1.png">
            </a>
        </div>
        <div class="item-con">
            <div class="bar-warp">
                <echarts-bar :data="deviceTrend.data" :title="deviceTrend.title" v-if="deviceTrend.data.name.length>0"/>
            </div>
            <div class="pie-warp">
                <div class="mask"></div>
                <echarts-pie :data="deviceStatus.data" :title="deviceStatus.title"
                             v-if="deviceStatus.data.length>0"></echarts-pie>
            </div>
            <ul>
                <li>7日在线设备新增<span>{{deviceChangeData['7day-On']}}</span></li>
                <li>7日离线设备新增<span>{{deviceChangeData['7day-Off']}}</span></li>
                <li>30日在线设备新增<span>{{deviceChangeData['30day-On']}}</span></li>
                <li>30日离线设备新增<span>{{deviceChangeData['30day-Off']}}</span></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import EchartsBar from '@/components/Echarts/EchartsBar';
    import EchartsPie from '@/components/Echarts/EchartsPie';
    import {
        getDeviceStatusData,
    } from "@/api/apiList";

    export default {
        name: "deviceStatus",
        components: {
            EchartsBar,
            EchartsPie
        },
        data: () => ({
            deviceTrend: {//设备趋势
                title: '7日设备接入趋势',
                data: { //
                    name: [], // 横坐标
                    value: [], // 纵坐标
                },
            },
            deviceStatus: {
                title: '设备状态统计',
                data: []
            },
            deviceChangeData: {},
        }),
        methods: {
            /**
             * 设备状态数据
             */
            getDeviceStatusData() {
                getDeviceStatusData({}).then(res => {
                    console.log('设备状态数据', res);
                    this.deviceChangeData = res.data.deviceStatusChangeData;
                    //7月设备接入趋势
                    this.getDeviceTrend(res.data.dailyDeviceNum);
                    //设备状态数据
                    this.getDeviceStatus(res.data.deviceOnlineData);

                });

            },
            /**
             * 获取接入趋势数据
             */
            getDeviceTrend(ary) {
                let _nameAry = [];
                let _valueAry = [];
                ary.map(item => {
                    _nameAry.push(item.creatDate);
                    _valueAry.push(item.num)
                });
                this.deviceTrend.data.name = _nameAry;
                this.deviceTrend.data.value = _valueAry;
            },
            /**
             * 获取设备状态数据
             */
            getDeviceStatus(ary) {
                let _codeAry = ['未激活', '在线', '离线'];
                let _newAry = [];
                ary.map(item => {
                    let obj = {};
                    obj.value = item.count;
                    obj.name = _codeAry[item.code];
                    _newAry.push(obj);
                });
                this.deviceStatus.data = _newAry;
            }
        },
        created() {
            // let nowDate = new Date();
            // let month = nowDate.getMonth() + 1;
            // this.deviceTrend.title = month + '月设备接入趋势';
            this.getDeviceStatusData();
        }
    }
</script>

<style scoped type="text/less" lang="less">
    .status-warp {
        position: relative;
        width: 100%;
        height: 27vh;
        background-image: url("../../assets/img/bg/bg_k06.png");
        background-size: 100% 100%;
        .item-con {
            height: calc(100% - 40px);
            display: flex;
            .bar-warp {
                position: relative;
                top: -10px;
                width: 48%;
                height: 100%;
            }
            .pie-warp {
                position: relative;
                top: -10px;
                width: 30%;
                height: 100%;
                .mask{
                    position: absolute;
                    top:0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 99;
                }
            }
            ul {
                margin: 40px 25px auto auto;
                li {
                    text-align: right;
                    line-height: 40px;
                    color: @wordColor1;
                    span {
                        margin-left: 20px;
                        font-size: 18px;
                    }
                    &:nth-child(odd) span {
                        color: @wordColor2;
                    }
                    &:nth-child(even) span {
                        color: @wordColor3;
                    }

                }
            }
        }
    }
</style>
